﻿<script type="text/javascript">
    var ip = "http://59.78.38.12:927";
    var xmlhttp2;
    var final_transcript = '';
    var answer = new Array("陈", "李逍遥", "是", "玄铁重剑", "乾坤大挪移");
    function updatetime() {
        if (document.getElementById("uname").innerHTML != document.getElementById("curuser").innerHTML) {
            xmlhttp2 = null;
            if (window.XMLHttpRequest) {// code for all new browsers
                xmlhttp2 = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {// code for IE5 and IE6
                xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp2 != null) {
                xmlhttp2.onreadystatechange = xml_state;
                var qqq = ip + "/Question/Game2/?roomid=" +
                                document.getElementById("roomid").innerHTML + "&answer=hello&uname=" +
                                document.getElementById("uname").innerHTML + "&time=20&count=" +
                                document.getElementById("count").innerHTML + "&isuser=0";
                xmlhttp2.open("GET", qqq, true);
                xmlhttp2.send();
            }
            else {
                alert("Your browser does not support XMLHTTP.");
            }
        } else {
            var tmp = document.getElementById("time").innerHTML;
            tmp--;
            document.getElementById("time").innerHTML = tmp;
            xmlhttp2 = null;
            if (window.XMLHttpRequest) {// code for all new browsers
                xmlhttp2 = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {// code for IE5 and IE6
                xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp2 != null) {
                xmlhttp2.onreadystatechange = xml_state;
                var qqq = ip + "/Question/Game2/?roomid=" +
                                document.getElementById("roomid").innerHTML + "&answer=" +
                                final_transcript + "&uname=" +
                                document.getElementById("uname").innerHTML + "&time=" +
                                document.getElementById("time").innerHTML + "&count=" +
                                document.getElementById("count").innerHTML + "&isuser=1";
                xmlhttp2.open("GET", qqq, true);
                xmlhttp2.send();
            }
            else {
                alert("Your browser does not support XMLHTTP.");
            }
        }
    }

    function xml_state() {
        if (xmlhttp2.readyState == 4) {// 4 = "loaded"

            if (xmlhttp2.status == 200) {// 200 = OK
                // ...our code here...
                var cmd = xmlhttp2.responseText.split(":");

                //                alert(xmlhttp2.responseText);

                if (cmd[4] == "1") {
                    if (cmd[5] == document.getElementById("uname").innerHTML) {
                        window.clearInterval(f);
                        Messenger.options = {
                            extraClasses: 'messenger-fixed messenger-on-top',
                            theme: 'block'
                        }
                        Messenger().post("you win");
                    } else {
                        window.clearInterval(f);
                        Messenger.options = {
                            extraClasses: 'messenger-fixed messenger-on-top',
                            theme: 'block'
                        }
                        Messenger().post({
                            message: 'you lose!',
                            type: 'error',
                            showCloseButton: true
                        });
                    }
                    alert(xmlhttp2.responseText);
                } else {
                    if (cmd[0] == "0") {
                        document.getElementById("time").innerHTML = cmd[3];
                        document.getElementById("curuser").innerHTML = cmd[1];
                        if (cmd[2] != "")
                            document.getElementById("answer").innerHTML = cmd[2];
                        document.getElementById("question").innerHTML = cmd[7];
                    } else if (cmd[0] == "1") {
                        document.getElementById("time").innerHTML = cmd[3];
                        document.getElementById("curuser").innerHTML = cmd[1];
                        if (cmd[2] != "")
                            document.getElementById("answer").innerHTML = cmd[2];
                        document.getElementById("question").innerHTML = cmd[7];
                    } else {
                        document.getElementById("time").innerHTML = cmd[3];
                        document.getElementById("curuser").innerHTML = cmd[1];
                        if (cmd[2] != "")
                            document.getElementById("answer").innerHTML = cmd[2];

                    }
                }
                /*               document.getElementById("question").innerHTML = xmlhttp.responseText;
                for (var ii = 0; i < 200000000; i++);
                document.getElementById("text").innerHTML = "";*/
            }
        }
    }

    var f = setInterval(updatetime, 1000);
    if (!('webkitSpeechRecognition' in window)) {
        upgrade();
    } else {
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
        //	document.getElementById("text").value = "hello world.";

        recognition.onstart = function () {
            recognizing = true;
            document.getElementById("label").innerHTML = "Start";
        };

        recognition.onerror = function (event) {
            if (event.error == 'no-speech') {
                document.getElementById("label").innerHTML = "no-speech";
                return;
            }
            if (event.error == 'audio-capture') {
                document.getElementById("label").innerHTML = "audio-capture";
                return;
            }
            document.getElementById("label").innerHTML = "error";
        };

        recognition.onend = function () {
            document.getElementById("label").innerHTML = "End";
            //recognizing = false;
            recognition.start();
        };
        var i = 0;

        recognition.onresult = function (event) {
            var interim_transcript = '';
            final_transcript = '';
            if (typeof (event.results) == 'undefined') {
                recognition.onend = null;
                recognition.stop();
                upgrade();
                return;
            }
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    final_transcript += event.results[i][0].transcript;
                } else {
                    interim_transcript += event.results[i][0].transcript;
                }
            }
            document.getElementById("answer").innerHTML = final_transcript;
            var xmlhttp;

            xmlhttp = null;
            if (window.XMLHttpRequest) {// code for all new browsers
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {// code for IE5 and IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp != null) {
                xmlhttp.onreadystatechange = state_Change;
                var isuser;
                if (document.getElementById("uname").innerHTML != document.getElementById("curuser").innerHTML)
                    isuser = 0;
                else
                    isuser = 1;
                var request = ip + "/Question/Game2/?roomid=" +
                                document.getElementById("roomid").innerHTML + "&answer=陈" +
                                "&uname=" +
                                document.getElementById("uname").innerHTML + "&time" +
                                document.getElementById("time").innerHTML + "&count=" +
                                document.getElementById("count").innerHTML + "&isuser=" + isuser;

                xmlhttp.open("GET", request, true);
                xmlhttp.send();
                i++;
            }
            else {
                alert("Your browser does not support XMLHTTP.");
            }


            function state_Change() {
                if (xmlhttp.readyState == 4) {// 4 = "loaded"

                    if (xmlhttp.status == 200) {// 200 = OK
                        // ...our code here...
                        var cmd = xmlhttp.responseText.split(":");
                        document.getElementById("answer").innerHTML = cmd[4];
                        if (cmd[4] == "1") {
                            if (cmd[5] == document.getElementById("uname").innerHTML) {
                                window.clearInterval(f);
                                alert("you win.");
                            } else {
                                window.clearInterval(f);
                                alert("you lose.\n");
                            }
                            alert(xmlhttp.responseText);
                        } else {
                            if (cmd[0] == "0") {
                                document.getElementById("time").innerHTML = cmd[3];
                                document.getElementById("curuser").innerHTML = cmd[1];
                                if (cmd[2] != "")
                                    document.getElementById("answer").innerHTML = cmd[2];
                                document.getElementById("question").innerHTML = cmd[7];
                            } else if (cmd[0] == "1") {
                                document.getElementById("time").innerHTML = cmd[3];
                                document.getElementById("curuser").innerHTML = cmd[1];
                                if (cmd[2] != "")
                                    document.getElementById("answer").innerHTML = cmd[2];
                                document.getElementById("question").innerHTML = cmd[7];
                            } else {
                                document.getElementById("time").innerHTML = cmd[3];
                                document.getElementById("curuser").innerHTML = cmd[1];
                                if (cmd[2] != "")
                                    document.getElementById("answer").innerHTML = cmd[2];

                            }
                        }
                    }
                }
            }

        };
        recognition.lang = "cmn-Hans-CN";
        recognition.start();
    }

    function upgrade() {
        alert("update you brower!!!!!!!!");
    }
</script>
@model IEnumerable<YZDD.Models.Question>

@{
    ViewBag.Title = "Game";
}
<div style="background-image:url(@Url.Content("~/Images/back5.jpg"))">
    <table style="border-width:0px;height:580px;width:1366px">
        <tr>
               <td style="vertical-align:top;width:15%">
                <h2 style="color:white;display:inline">Room:</h2><span style="color:white;font-size:30px" class="text-left" id="roomid">@ViewBag.roomid</span>
                <p style="color:white">
                    Current User: <span id="curuser">@ViewBag.curuser</span>
                </p>
                <p style="color:white">
                    your name: <span id="uname">@ViewBag.uname</span>
                </p>
                <p style="color:white" class="hide">
                    count: <span id="count">@ViewBag.count</span>
                </p>
            </td>
            <td style="width:70%">
                <div class="container">  
                    <table style="border-width:0px;height:580px;width:100%;text-align:center;vertical-align:middle">
                        <tr style="height:25%;width:100%">
                            <td style="width:100%">
                                <table style="border-width:0px;width:100%">
                                    <tr>
                                        <td style="width:25%">

                                        </td>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 4)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[4]</p>
                                            }
                                        </td>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 5)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[5]</p>
                                            }
                                        </td>
                                        <td style="width:25%">
                              
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr style="height:25%;width:100%">
                            <td style="width:100%">
                                <table style="border-width:0px;width:100%">
                                    <tr>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 3)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[3]</p>
                                            }
                                        </td>
                                        <td style="width:50%">
                                            <p style="color:white;font-size:23px">question:
                                                @foreach (var item in Model)
                                                {
                                                    <span id ="question">
                                                       @Html.DisplayFor(modelItem => item.Quesiton)
                                                    </span>
                                                }</p>
                                        </td>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 6)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[6]</p>
                                            }
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr style="height:25%";width:100%>
                            <td style="width:100%">
                                <table style="border-width:0px;width:100%">
                                    <tr>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 2)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[2]</p>
                                            }
                                        </td>
                                        <td style="width:50%">
                                            <p style="color:white;font-size:20px">answer:
                                                <span id="answer"></span>
                                            </p>
                                        </td>
                                        <td style="width:25%">
                                            @if (@ViewBag.number > 7)
                                            {
                                                <img src="~/Images/Icon-user.png"/>
                                                <p style="color:white">@ViewBag.user[7]</p>
                                            }
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr style="height:25%";width:100%>
                            <td style="width:100%">
                                <table style="border-width:0px;width:100%">
                                    <tr>
                                        <td style="width:25%">

                                        </td>
                                        <td style="width:25%">
                                            <img src="~/Images/Icon-user.png"/>
                                            <p style="color:white">@ViewBag.user[1]</p>
                                        </td>
                                        <td style="width:25%">
                                            <img src="~/Images/Icon-user.png"/>
                                            <p style="color:white">@ViewBag.user[0]</p>
                                        </td>
                                        <td style="width:25%">

                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
            <td style="vertical-align:top;width:15%">
                <br />
                <br />
                <p style="color:white;font-size:100px" id="time">20</p>
            </td>
        </tr>
    </table>
</div>
<p id="label"></p>